<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CS:RUN</title>

    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>

<script src="js/lib/three.js"></script>
<script src="js/CameraController.js"></script>

<body oncontextmenu=self.event.returnValue=false>
</body>

<script>
    let camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
    let scene = new THREE.Scene();
    let renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize, false );
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    let geometry = new THREE.PlaneGeometry( 100, 100);
    geometry.rotateX(-Math.PI/2);
    let loader = new THREE.TextureLoader();
    let texture = loader.load('texture/UV_Grid_Sm.jpg');
    let material = new THREE.MeshBasicMaterial( {
        map: texture
    } );
    let mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    let man = new THREE.Group();
    man.position.set(0,2,0);
    scene.add( man );

    man.add(camera);
    let control = new CameraController(man);
    control.update();

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
    animate();
</script>

</html>